<template>
  <div v-if="menu.children.length" class="menu-item">
    {{ menu.label }}
    <div class="menu-popup">
      <div
        v-for="(subMenu, index) in menu.children"
        :key="index"
        class="menu-sub-item"
        @click="subMenu.click"
      >
        <span>{{ subMenu.label }}</span>
        <span>{{ subMenu.shortcutKey }}</span>
        <span v-if="subMenu.children" class="iconfont icon-youjiantou"></span>
        <div v-if="subMenu.children" class="menu-popup">
          <div
            v-for="(sub, i) in subMenu.children"
            :key="`${index}-${i}`"
            class="menu-sub-item"
            @click="sub.click"
          >
            <span>{{ sub.label }}</span>
            <span>{{ sub.shortcutKey }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { PropType } from 'vue'

export interface Menu {
  label: string
  children: SubMenu[]
  click?: () => void
}

export interface SubMenu {
  label: string
  children?: SubMenu[]
  click?: () => void
}

defineProps({
  menu: {
    type: Object as PropType<Menu>,
    required: true
  }
})
</script>
<style lang="scss" scoped>
.menu {
  display: flex;

  .menu-item {
    position: relative;
    margin-left: 10px;
    padding: 3px 8px;
    color: var(--base-color);
    border-radius: 5px;
    z-index: 999;

    &:hover {
      background-color: var(--input-background);

      .menu-popup {
        display: block;
      }
    }

    .menu-popup {
      display: none;
      position: absolute;
      min-width: 220px;
      left: 0;
      background-color: var(--menu-popup);
      padding: 5px;
      border-radius: 5px;
      border: 1px solid var(--base-border);

      .menu-sub-item {
        position: relative;
        padding: 4px 10px;
        border-radius: 5px;
        display: flex;
        justify-content: space-between;

        &:hover {
          color: var(--active-color);
          background-color: var(--header-background);

          .menu-popup {
            display: block;
          }
        }
      }

      .menu-popup {
        display: none;
        left: 100%;
        top: -50%;
      }
    }
  }
}
</style>
